<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>虚拟 DOM</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script>
      // React.createElement 创建的元素就是 『虚拟 DOM』 对象, 又称之为『虚拟节点』 刚才称之为『react 元素』
      // 虚拟 DOM 对象最终会渲染为真实 DOM 插入到文档中
      // 作用: 提高后续 DOM 更新的效率
      let div = React.createElement('div', {title: 'test'}, 'Hello React');

      //手动将虚拟 DOM 对象转为真实 DOM 
      let ele = document.createElement(div.type);

      //设置属性
      for(let i in div.props){
        //判断
        if(i === 'children'){
          //设置标签文本
          ele.innerHTML = div.props[i];
        }else{
          //为标签设置属性
          ele.setAttribute(i, div.props[i]);
        }
      }

      //插入到文档中
      document.querySelector('#root').append(ele);
    </script>
  </body>
</html>
